<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_高阶函数与函数柯里化</title>
</head>
<body>
  姓名: <input type="text" id="name"><br>
  年龄: <input type="text" id="age"><br>

  <script>
    const p = {
      name: 'Tom',
      age: 20
    }
    // 初始化显示p对象的内容到页面input中
    const nameInput = document.getElementById('name')
    const ageInput = document.getElementById('age')
    nameInput.value = p.name
    ageInput.value = p.age

    
    // 不可用
    /* function handle(e, propName) {
      p[propName] = e.target.value
      console.log(p)
    } */

    // 进行函数柯里化处理
    // 为什么要这么做, propName是开始由我来决定, 而e后面由浏览器自动传入
    function handle(propName) {
      return function (e) {
        p[propName] = e.target.value
        console.log(p)
      }
    }

    /* 
    当改变姓名和年龄的输入时, 立即更新p对象中的name和age
    */
   // 给input标签绑定input监听 (输入过程中实时触发)
   /* nameInput.oninput = function (e) {
     // 将输入的值, 更新为p的name
     p.name = e.target.value
     console.log(p)
   }
   ageInput.oninput = function (e) {
     // 将输入的值, 更新为p的age
     p.age = +e.target.value
     console.log(p)
   } */
   nameInput.oninput = handle('name')
   ageInput.oninput = handle('age')



  </script>

  <script>
    /* 
    高阶函数: 满足下面2条中的任意一条就是
      1. 接收的参数是函数: 
        数组的forEach/filter/map/reduce/find/findIndex/some/every
        Promise()
        .then()
      2. 返回是函数: 
        闭包
        bind()
    为什么要设计高阶函数, 它强在哪?
      一个函数就代表一套动态的功能代码, 
      如果一个函数它能接收函数, 那就是接收了一个后面可以执行的功能代码 
      => 函数的动态功能就比较强

      如果一个函数返回一个内部的函数=> 函数外部可以调用这个返回的函数来操作内部数据
    */
    /* function fn1() { // fn1就是高阶函数
      var a = 2
      function fn2() {
        a++
        console.log(a)
      }
      return fn2
    }
    const fn = fn1()
    fn() // 3
    fn() // 4 */

    /* 
    函数柯里化: 将一个接收多个参数的函数改造为接收一个参数的函数来实现功能
    惰性求值: 开始只是指定已确定的数据, 最后指定剩余的数据后才真正处理数据得到结果
    */

    function sum(a, b, c) {
      return a + b + c
    }
    console.log(sum(2, 3, 4)) // 9

    function sum2(a) {
      return function (b) {
        return function (c) {
          return a + b + c
        }
      }
    }
    console.log(sum2(2)(3)(4)) // 9

  </script>
</body>
</html>